<template>
	<div class="userInfo">
		<img class="avatar" :src="userData.avatar" />
		<div class="nickname">{{ userData.nickname }}</div>
		<div class="logout" @click="logout">退出</div>
	</div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('userlogin');

export default {
	name: 'userinfo',
	methods: {
		...mapActions(['logout']),
	},
	props: ['userData'],
};
</script>

<style lang="scss" scope>
.userInfo {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	user-select: none;

	img {
		width: 48px;
		border: 2px blue solid;
		border-radius: 50%;
	}

	.nickname {
		font-size: 28px;
		margin-left: 16px;
	}

	.logout {
		font-size: 18px;
		margin-left: 8px;
		width: 48px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		cursor: pointer;

		&:hover {
			color: white;
			background-color: blue;
			border-radius: 5px;
		}
	}
}
</style>
